<template>
	<view class="classify">
		<view class="search" @click="search"><uni-search-bar style="height: 100rpx;" cancelText="" :radius="100"></uni-search-bar></view>
		<view style="padding-top: 120rpx;">
			<v-tabs :fixed="true" v-model="current" :tabs="tabs" @change="changeTab"></v-tabs>

			<view class="title" v-for="(item, index) in data" :key="index" @click="detail(item)">{{ ++index }}、{{ item.title }}</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			page: 1,
			current: 0,
			tabs: ['vue', 'js', '微信小程序', 'node', 'css', 'html'],
			data: [],
			isdata: true
		};
	},
	onShow() {

	},
	onLoad() {
		this.$myRequest({
			url: '/question',
			method: 'get',
			data: { type: this.tabs[this.current],page:this.page }
		}).then(res => {
			// console.log(res)
			this.data = res.data;
		});
	},
	onReachBottom() {
		if (this.isdata) {
			++this.page;
			this.$myRequest({
				url: '/question',
				method: 'get',
				data: { type: this.tabs[this.current], page: this.page }
			}).then(res => {
				if (res.data.length < 20) {
					this.isdata = false;
					uni.showToast({
						title: '加载完毕'
					});
				} else {
					this.isdata = true;
				}
				this.data = [...this.data, ...res.data];
			});
		}
	},
	methods: {
		changeTab(e) {
			this.data = [];
			this.page=1
			this.$myRequest({
				url: '/question',
				method: 'get',
				data: { type: this.tabs[e],page:this.page }
			}).then(res => {
				if (res.data.length < 20) {
					this.isdata = false;
					uni.showToast({
						title: '加载完毕'
					});
				} else {
					this.isdata = true;
				}
				this.data = [...this.data, ...res.data];
			});
		},

		detail(e) {
			uni.setStorage({
				key: 'item',
				data: e
			});
			uni.navigateTo({
				url: '../detail/detail'
			});
		},
		search() {
			uni.navigateTo({
				url: '../search/search'
			});
		}
	}
};
</script>

<style lang="less">
.title {
	padding: 40rpx 20rpx;
	border-bottom: 1rpx solid #ccc;
}
.search {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	width: 100%;
	background-color: #ffffff;
	margin: 0 auto;
}
</style>
